<template>
	<view class="orderDetail">
		<view class="store">
			<view>服务门店</view>
			<view style="display: flex;justify-content: space-between;align-items: center;margin-top: 10px;">
				<view style="display: flex;align-items: center;width: 88%;flex-wrap: nowrap;">
					<img style="width: 30px;height: 30px;margin-right: 10px;" src="@/static/dingwei1.png" alt="">
					<view style="width: 88%;">
						<view style="font-weight: bold;margin-bottom: 8px;">{{!info.transfer_user ? (info.factory ? info.factory.factory_name : info.wash_store.store_name) : info.outlet.outlet_name}}</view>
						<view style="width: 88%;">
							<view v-if="info.transfer_province">{{info.transfer_province + info.transfer_city + info.transfer_district + info.transfer_detail}}</view>
							<view v-else>{{info.rept_province + info.rept_province + info.rept_district + info.rept_detail}}</view>
						</view>
					</view>
				</view>
				<view><img @click="callPhone(info)" style="width: 20px;height: 20px;" src="@/static/dianhua.png" alt=""></view>
			</view>
		</view>
		<view class="goodsList">
			<view v-for="(demo,idx) in info.detail" :key="idx" class="goodsItem">
				<view style="display: flex;">
					<img style="width: 50px;height: 50px;border-radius: 4px;margin-right: 10px;" :src="demo?.commodity_pic" alt="">
					<view style="height: 50px;color: #7c7c7c;">
						<view>{{demo.commodity_name}}</view>
						<view style="margin-top: 5px;">×{{demo.commodity_num}}</view>
					</view>
				</view>
				<view style="font-weight: bold;">￥{{demo?.unit_fee}}</view>
			</view>
			<view style="display: flex;justify-content: space-between;font-size: 12px;padding: 15px 0;">
				<view>使用优惠券</view>
				<view style="font-weight: bold;">￥{{info.coupon_price}}</view>
			</view>
			<view style="display: flex;justify-content: space-between;font-size: 12px;padding: 15px 0">
				<view>总计价格</view>
				<view style="font-weight: bold;">￥{{info.payment}}</view>
			</view>
		</view>
		<view class="orderMessage">
			<view>订单号：{{info.order_no}}</view>
			<view style="margin: 5px 0;">下单时间：{{info.created_at}}</view>
			<view>支付方式：{{info.pay_type === 1?'微信支付':'会员卡支付'}}</view>
		</view>
		<view class="box">
			<view class="text" style="display: flex;font-size: 12px;">
				<view style="white-space: nowrap;width: 60px;">售后图片：</view>
				<view style="width: calc(100% - 60px);display: flex;flex-wrap: wrap;">
					<view v-for="(item,index) in pics" :key="index" @click="uploadImage(index)" class="imgBox">
						<img v-if="item.img" style="width: 100%;height: 100%;" :src="item.img" alt="">
						<view v-else>+</view>
					</view>
				</view>
			</view>
			<view class="text" style="display: flex;font-size: 12px">
				<view style="white-space: nowrap;width: 60px;">申请理由：</view>
				<view style="border: 1px solid #dbdbdb;padding: 10px;box-sizing: border-box;width: calc(100% - 60px);">
					<textarea style="width: 100%;height: 80px;" v-model="reason" cols="20" rows="5"></textarea>
				</view>
			</view>
		</view>
		<view class="priceButton" @click="refund">申请售后</view>
	</view>
</template>

<script>
	import { orderRefundApply } from '@/api/home.js'
	import baseUrl from '@/utils/baseUrl.js'
	export default {
		data() {
			return {
				info:{},
				pics:[
					{img:''}
				],
				reason:''
			}
		},
		onLoad(options) {
			let info = JSON.parse(options.info)
			this.info = info
		},
		methods: {
			refund(){
				if(!this.pics[0].img) return uni.showModal({
					title:"请上传售后图片",
					icon:'none'
				})
				if(!this.reason) return uni.showModal({
					title:"请输入申请理由",
					icon:'none'
				})
				let data = {
					orderNo:this.info.order_no,
					reason:this.reason,
					refundPic:[]
				}
				this.pics.map(item=>{
					if(item.img) data.refundPic.push(item.img)
				})
				orderRefundApply(data).then(res=>{
					if(res.code === 200) {
						uni.showToast({
							title: res.message,
							icon:'none'
						})
						uni.$emit('refreshPage', {});
						uni.navigateBack({delta:2})
					}else{
						uni.showToast({
							title: res.message,
							icon:'none'
						})
					}
				})
			},
			uploadImage(index){
				uni.chooseImage({
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择,或者使用相
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths
						uni.uploadFile({
							url:baseUrl+'/api/common/upload',
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								file: tempFilePaths[0]
							},
							header: {
								'token': uni.getStorageSync('token')
							},
							success: (uploadFileRes) => {
								let res = JSON.parse(uploadFileRes.data)
								this.pics[index].img = baseUrl+res.data
								if(index === this.pics.length-1) this.pics.push({img:''})
							}
						})
					}
				})
			},
			callPhone(info) {
				let phone = !info.transfer_user ? (info.factory ? info.factory.phone : info.wash_store.phone) : info.outlet.phone
				uni.makePhoneCall({
					phoneNumber: phone, // 电话号码
					success: function () {
					  console.log('拨打电话成功');
					},
					fail: function (err) {
					  console.log('拨打电话失败：', err);
					}
				});
			},
		}
	}
</script>

<style scoped lang="less">
	.priceButton{
		padding: 8px 20px;
		background-color: #2c6cf4;
		color: #fff;
		font-size: 14px;
		border-radius: 6px;
		height: 20px;
		text-align: center;
		margin-top: 20px;
	}
	.imgBox{
		width: 100px;
		height: 100px;
		overflow: hidden;
		border: 1px solid #dbdbdb;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 20px;
		margin-right: 10px;
		margin-bottom: 10px;
	}
	.orderDetail{
		height: 100vh;
		overflow: auto;
		padding: 10px;
		box-sizing: border-box;
		.store{
			background-color: #fff;
			border-radius: 4px;
			padding: 10px;
			font-size: 12px;
			margin-bottom: 10px;
		}
		.goodsList{
			background-color: #fff;
			border-radius: 4px;
			padding: 0 10px 15px;
			font-size: 14px;
			margin-top: 10px;
			display: flow-root;
			.goodsItem{
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1px solid #dbdbdb;
				padding-bottom: 15px;
				margin-top: 15px;
			}
		}
		.orderMessage{
			background-color: #fff;
			border-radius: 4px;
			padding: 10px;
			margin-top: 10px;
			font-size: 12px;
			display: flow-root;
		}
		.box{
			background-color: #fff;
			margin-top: 10px;
			border-radius: 4px;
			padding: 10px;
			box-sizing: border-box;
		}
	}

</style>
